<template>
  <div class="moment">
    <div class="moment-header">
      <img class="moment-header-avatar" v-if="moment.user.avatar" :src="`http://192.168.137.35:8080/files/${moment.user.avatar}`" />
      <div class="moment-header-avatar" v-else></div>
      <div class="moment-header-info">
        <div class="moment-header-text">{{moment.user.nickname}}</div>
        <div class="moment-header-time">{{moment.createdat}}</div>
      </div>
    </div>
    <div class="moment-body">
      <div>{{moment.moment}}</div>
      <div class="moment-images">
        <img class="moment-images-item" v-for="(item, idx) in moment.images" :src="`http://192.168.137.35:8080/files/${item}`" :key="idx" alt="朋友圈图片" />
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: ['moment'],
};
</script>

<style>

.moment {
  background-color: #f5f5f5;
  min-height: 30px;
  margin-bottom: 10px;
  padding: 10px;
  border-radius: 5px;
}
.moment-header {
  display: flex;
  align-items: center;
}
.moment-header-avatar {
  width: 60px;
  height: 60px;
  border-radius: 40px;
  background-color: #fff;
}
.moment-header-info {
  margin-left: 20px;
}
.moment-header-text {
  font-size: 14px;
  color: #333;
}
.moment-body {
  background-color: rgba(255, 255, 255, 0.521);
  padding: 10px;
  margin-top: 10px;
  border-radius: 5px;
}
.moment-images {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  margin-top: 10px;
}

.moment-images-item {
  width: 160px;
  height: 160px;
  margin-right: 15px;
  border: 1px solid #e8e8e8;
  box-sizing: border-box;
}

.moment-images-item:nth-child(3n + 3) {
  margin-right: 0;
}

.moment-images-item:nth-child(n + 3) {
  margin-top: 10px;
}
</style>
